<template>
    <div>
        <Dialog :openVis="visible" width="70%" title="健康终端报警列表" @close="closeModal">
            <template #container>
                <div class="dialog-con">
                    <a-table
                        class="ant-table-striped"
                        :class="[dataSource.length === 0 ? 'no-bottom' : '']"
                        :dataSource="dataSource"
                        :columns="columns"
                        :scroll="{ y: '56vh' }"
                        :pagination="paginationProp"
                        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
                    >
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'operation'">
                                <span class="detail-data" @click="openUserInfoModal(record)">详细数据</span>
                            </template>
                        </template>
                    </a-table>
                </div>
            </template>
        </Dialog>
        <UserInfoModal ref="userInfoModal"></UserInfoModal>
    </div>
</template>
<script setup lang="ts">
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { ref } from 'vue';
    import UserInfoModal from '/@/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue';
    import { columns } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
    import { getUserListByDeptId } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';

    const emit = defineEmits(['close']);
    //分页相关
    const current = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const deptId = ref();
    const paginationProp = ref({
        showSizeChanger: true,
        pageSizeOptions: ['10', '30', '50'],
        pageSize,
        current,
        total,
        showTotal: (total) => `总 ${total} 条`,
        onChange: pageChange,
    });

    function pageChange(page, pageS) {
        current.value = page;
        pageSize.value = pageS;
        getRecords(deptId.value);
    }

    const dataSource = ref([]);
    const visible = ref(false);

    function openModal(id: string) {
        visible.value = true;
        deptId.value = id;
        getRecords(id);
    }

    function closeModal() {
        visible.value = false;
        emit('close');
    }

    async function getRecords(id: string) {
        if (!id) {
            return;
        }
        const { code, result } = await getUserListByDeptId({ orgId: id, pageSize: pageSize.value, pageNo: current.value });
        if (code == 200) {
            dataSource.value = result?.records;
            total.value = result?.total;
        }
    }

    const userInfoModal = ref();

    function openUserInfoModal(item) {
        const data = {
            ...item,
            username: item?.realName,
            unit: item?.orgName,
            department: item?.orgName1,
            bindDate: item?.bindDate,
            userid: item?.userId,
        };
        userInfoModal.value.openModal(data);
    }

    defineExpose({
        openModal,
        closeModal,
    });
</script>
<style scoped lang="less">
    .dialog-con {
        background-color: #00152b;
        //border: 1px solid #129bff;
        min-height: 500px;
    }

    .detail-data {
        display: block;
        color: #33afff;
        cursor: pointer;
    }

    :deep(.ant-table-thead > tr > th) {
        color: #fff !important;
        background: rgba(35, 132, 221, 0.5) !important;
        border-top: 1px solid #1d4e7c !important;
        border-bottom: none;
        padding: 9px 9px;
    }

    :deep(.ant-table-cell-scrollbar) {
        box-shadow: none !important;
    }

    :deep(.ant-table) {
        color: #fff;
        background-color: transparent;
        //pointer-events: none;
    }

    :deep(.ant-table-tbody > tr > td) {
        border-bottom: none;
        padding: 10px 4px;
    }

    :deep(.ant-table-row:hover) {
        background-color: transparent;
        color: #ffffff;
    }

    .ant-table-striped :deep(.table-default) td,
    .ant-table-striped :deep(.table-striped) td {
        background-color: #00152b;
        border-bottom: 1px solid #2384dd;
    }

    :deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
        background: transparent;
    }

    //#00152b
    // 分页
    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
        background-color: #1f2935;
        color: #8291a9;
        border: none;
    }

    :deep(.ant-pagination-item) {
        background-color: #1f2935;
        color: #ffffff;
        border: none;
    }

    // 当前页选中的样式
    :deep(.ant-pagination-item-active) {
        background-color: #0081ff;
    }

    :deep(.ant-pagination-item-active a) {
        color: #ffffff;
    }

    :deep(.ant-pagination-item a),
    :deep(.ant-pagination-total-text) {
        color: #ffffff;
    }

    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
        color: #ffffff;
        background-color: #1f2935;
    }

    // 省略样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
        color: #ffffff;
    }

    // 省略鼠标移入样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
        color: rgba(255, 255, 255, 0.4);
    }

    // 下一页
    :deep(.ant-pagination-next .ant-pagination-item-link) {
        background-color: #1f2935;
        color: #8291a9;
        border: none;
    }

    :deep(.ant-table-pagination-right) {
        margin-right: 10px !important;
    }

    :deep(.no-bottom .ant-table-cell) {
        border-bottom: none !important;
    }
</style>
